<template>
  <div class="four">
    <div class="four-one">
      <div class="four-one-one">Weblog 博客登录</div>
      <img
        src="http://47.104.167.34:9110/assets/login-logo-57e339e7.png"
        alt=""
      />
    </div>
    <div class="four-two">
      <div class="four-two-one">
        <h2>欢迎回来</h2>
        <div class="four-two-two">
          <span>......账号密码登录......</span>
        </div>
         <!-- 带校验的表单 -->
        <el-form 
          :model="loginForm" 
          :rules="loginRules" 
          ref="loginForm"
          class="login-form"
        >
          <el-form-item prop="username">
            <el-input
              placeholder="请输入账号"
              prefix-icon="el-icon-user"
              v-model="loginForm.username"
            ></el-input>
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              v-model="loginForm.password"
              type="password"
            ></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button 
              type="primary" 
              class="login-btn"
              @click="handleLogin"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
     

<script>
export default {
  data() {
     const validateUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入账号'));
      }
      // 可以添加更复杂的校验，比如账号格式、长度限制等
      if (value.length < 3) {
        return callback(new Error('账号长度不能少于3个字符'));
      }
      callback();
    };
    
    // 密码校验规则
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码'));
      }
      if (value.length < 6) {
        return callback(new Error('密码长度不能少于6个字符'));
      }
      // 可以添加密码强度校验，比如包含字母和数字等
      
      callback();
    };
    return {
       loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { validator: validateUsername, trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ]
      },
      tableData:[],
    };
  },
   methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
                 this.$axios
        .post(`/api/api/login`, this.loginForm)
        .then((res) => {
          this.tableData = res.data.data;
          console.log(this.tableData, "1111");
          localStorage.setItem("authorization",`Bearer ${res.data.data.token}`);
           this.$router.push('/five');

          
          
          
          
          

        })
        .catch((err) => {
          console.log(err);
        });
         
        } else {
          // 校验失败
          console.log('校验失败');
          return false;
        }
      });
    }
   }
};
</script>

<style scoped>
.four {
  display: flex;
}
.four-one {
  width: 70%;
  height: 100vh;
  background-color: #001428;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.four-one-one {
  width: 100%;
  font-size: 36px;
  color: white;
  text-align: center;
}
.four-one img {
  width: 456px;
  height: 450px;
  margin-top: -350px;
}
.four-two {
    width: 30%;
  text-align: center;
   position: relative;
}
.four-two-one{
    width: 100%;
    position: absolute;
  top: 50%;
  left: 50%;
  
  transform: translate(-50%, -50%);
}
::v-deep .el-input__inner{
  width: 250px; 
  height: 40px; 
  font-size: 14px; 
}

::v-deep .el-input__prefix {
 
  left: 100px; 
}



.login-form {
  margin-top: 25px; 
}
.login-form .el-form-item {
  margin-bottom: 18px; 
}

.login-btn {
  width: 250px; 
  height: 40px; 
  font-size: 16px;
}

</style>